<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>教练管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>教练列表</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">教学科目</label>
                        <div class="layui-input-inline">
                            <select name="teachingStage" id="teachingStage" style="float: left;position: relative;"
                                    lay-verify="teachingStage">
                                <option value="1">科目一</option>
                                <option value="2">科目二</option>
                                <option value="3">科目三</option>
                                <option value="4">科目四</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" title="开始被选的教练当教练选择教练时,才会被教练选取">被选状态</label>
                        <div class="layui-input-inline">
                            <select name="isStartChoice" id="isStartChoice" style="float: left;position: relative;"
                                    lay-verify="isStartChoice">
                                <option value="">全部</option>
                                <option value="0">未开始被选</option>
                                <option value="1">开始被选</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">选择情况</label>
                        <div class="layui-input-inline">
                            <select name="isFree" id="isFree" style="float: left;position: relative;"
                                    lay-verify="isFree">
                                <option value="0">全部</option>
                                <option value="1">教练空缺</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" title="教练分配车辆情况">车辆情况</label>
                        <div class="layui-input-inline">
                            <select name="possessVehicle" id="possessVehicle" style="float: left;position: relative;"
                                    lay-verify="possessVehicle">
                                <option value="">全部</option>
                                <option value="1">未分配车</option>
                            </select>
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" title="显示更多" id="moreBtn"
                            type="0">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">教练ID</label>
                        <div class="layui-input-inline">
                            <input type="text" id="coachId" name="coachId" placeholder="教练ID" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="fullname" name="fullname" placeholder="姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" id="phone" placeholder="电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="selectsBtn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="coachList" lay-filter="coachList" class="layui-table"></table>
        </div>
    </div>
</div>
<div class="layui-form">
    <div class="layui-inline" id="teachingStageInline" style="display: none">
        <div style="margin-top: 30px;">
            <label class="layui-form-label">教学科目</label>
            <div class="layui-input-inline">
                <select name="teachingStageChange" id="teachingStageChange" style="float: left;position: relative;"
                        lay-verify="teachingStageChange">
                    <option value="1">科目一</option>
                    <option value="2">科目二</option>
                    <option value="3">科目三</option>
                    <option value="4">科目四</option>
                </select>
            </div>
        </div>
        <br>
        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="teachingStageBtn"
                style="margin-left: 50%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">修改</i>
        </button>
    </div>
    <div class="layui-inline " id="isStartChoiceInline" style="display: none">
        <div style="margin-top: 30px;">
            <label class="layui-form-label">被选状态</label>
            <div class="layui-input-inline">
                <select name="isStartChoiceChange" id="isStartChoiceChange" style="float: left;position: relative;"
                        lay-verify="iStartChoiceChange">
                    <option value="0">未开始被选</option>
                    <option value="1">开始被选</option>
                </select>
            </div>
        </div>
        <br>
        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="isStartChoiceBtn"
                style="margin-left: 50%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">修改</i>
        </button>
    </div>
    <div class="layui-inline " id="allIsStartChoiceInline" style="display: none">
        <div style="margin-top: 30px;">
            <label class="layui-form-label">教学科目</label>
            <div class="layui-input-inline">
                <select name="teachingStages" id="teachingStages" style="float: left;position: relative;"
                        lay-verify="teachingStages">
                    <option value="1">科目一</option>
                    <option value="2">科目二</option>
                    <option value="3">科目三</option>
                    <option value="4">科目四</option>
                </select>
            </div>
        </div>
        <div style="margin-top: 30px;">
            <label class="layui-form-label">被选状态</label>
            <div class="layui-input-inline">
                <select name="allIsStartChoiceChange" id="allIsStartChoiceChange" style="float: left;position: relative;"
                        lay-verify="iStartChoiceChange">
                    <option value="0">结束选择</option>
                    <option value="1">开始被选</option>
                </select>
            </div>
        </div>
        <br>
        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="allIsStartChoiceBtn"
                style="margin-left: 50%;margin-top: 15%;">
            <i class="layui-icon layuiadmin-button-btn">修改</i>
        </button>
    </div>
</div>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="modify">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="resetPwd">重置密码</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="updateTeachingStage">修改教学科目</button>
        <button class="layui-btn layui-btn-sm layui-bg-orange" lay-event="updateIsStartChoice">修改是否被选</button>
        <button class="layui-btn layui-btn-sm layui-bg-orange" lay-event="updateAllTeachingStage">修改全部教练是否被选</button>
    </div>
</script>
<script>
    layui.use(['table', 'laydate','layer','okLayer'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer=layui.layer,
            okLayer=layui.okLayer;

        //获取表格数据
        var coachTable=table.render({
            elem: '#coachList',
            url: mainUri + '/vCoach/selects', //数据接口
            where: {teachingStage:'1'},
            toolbar: '#toolbarDemo',
            cols: [[ //表头
                {type: 'checkbox'},
                {field: 'coachId', title: 'ID'},
                {field: 'fullname', title: '姓名' },
                {field: 'agender', title: '性别',templet:function(d){
                    if(d.agender=='0'){
                        return "男"
                    }else{
                        return "女"
                    }
                    } },
                {field: 'phone', title: '电话'},
                {field: 'email', title: '邮箱'},
                {field: 'joiningTime', title: '入职时间'},
                {
                    field: 'teachingStage', title: '教学科目', templet: function (d) {
                        if (d.teachingStage == '1') {
                            return "科目一"
                        } else if (d.teachingStage == '2') {
                            return "科目二"
                        }
                        if (d.teachingStage == '3') {
                            return "科目三"
                        } else if (d.teachingStage == '4') {
                            return "科目四"
                        } else {
                            return "数据异常"
                        }
                    }
                },
                {field: 'isStartChoice', title: '是否开始被选',templet: function (d) {
                        if (d.isStartChoice == '1') {
                            return "开始被选"
                        } else  {
                            return "未开始被选"
                        }
                    }},
                {field: 'choiceCount', title: '教学数',templet: function (d) {
                    if(!isNoEmpty(d.choiceCount)){
                        d.choiceCount=0;
                    }
                    if(!isNoEmpty(d.choiceCountMax)){
                        d.choiceCountMax=3
                    }
                    return d.choiceCount+"/"+d.choiceCountMax
                    }},
                {field: 'score', title: '评分'},
                {field: 'vehicleId', title: '车辆id',hide: true},
                {field: 'vehicleName', title: '车辆名'},
                {field: 'licensePlateNumber', title: '车牌'},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
        });
        function editCoach(data) {
            let uri="coachEdit.html?"+dataToString(data)
            okLayer.open("信息修改", uri, "50%", "60%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {
                coachTable.reload();
            })
        }
        //监听行工具事件
        table.on('tool(coachList)', function(obj){
            var data = obj.data;
            // console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确定删除该条信息', function (index) {
                    myAjax(mainUri + "/coach/delete", {coachId: data['coachId']}, function (d) {
                        if (d['code'] == '0') {
                            layer.msg(d['msg'], {
                                icon: 1, time: 2000, end: function () {
                                    coachTable.reload();
                                    layer.closeAll();
                                }
                            })
                        } else {
                            alert(d['msg'])
                            layer.closeAll();
                        }
                    })
                })
            }else if(obj.event === 'resetPwd'){
                layer.confirm('确定重置密码?', function (index) {
                    myAjax(mainUri+"/coach/updatePwd",{coachId:data['coachId']},function(d){
                        if(d['code']=='0'){
                            layer.msg("重置密码成功", {
                                icon: 1, time: 2000, end: function () {
                                    layer.closeAll();
                                }
                            })
                        }else{
                            alert("重置密码失败")
                        }
                    })
                });
            } else if(obj.event === 'modify'){
                editCoach(data)
            }
        });

        //监听行工具事件
        table.on('toolbar(coachList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'updateTeachingStage') {
                layer.open({
                    type: 1,
                    title: '修改教学科目',
                    content: $('#teachingStageInline'),
                    area: ['400px', '300px']
                })
            } else if (obj.event === 'updateIsStartChoice') {
                layer.open({
                    type: 1,
                    title: '修改被选状态',
                    content: $('#isStartChoiceInline'),
                    area: ['400px', '300px']
                })
            } else if (obj.event === 'updateAllTeachingStage') {
                layer.open({
                    type: 1,
                    title: '修改被选状态',
                    content: $('#allIsStartChoiceInline'),
                    area: ['400px', '300px']
                })
            }
        });

        /**
         * 修改更多按钮
         */
        function changeMoreBtn() {
            var btn = $("#moreBtn");
            if (btn.attr("type") == '1') {
                btn.html(" <i class=\"layui-icon\">&#xe654;</i>\n")
                btn.attr('type', '0')
                btn.attr('title', '显示更多')
            } else {
                btn.html(" <i class=\"layui-icon\">&#xe67e;</i>\n")
                btn.attr('type', '1')
                btn.attr('title', '隐藏')
                $("#coachId").val("");//教练id
                $("#fullname").val("");//教练姓名
                $("#phone").val("");//电话号码
            }
        }

        /**
         * 搜索按钮
         */
        $("#selectsBtn").on('click', function () {
            var coachId = $("#coachId").val();//教练id
            var fullname = $("#fullname").val();//教练姓名
            var phone = $("#phone").val();//电话号码
            var teachingStage = $("#teachingStage").find("option:checked").val();//教学阶段
            var isStartChoice = $("#isStartChoice").find("option:checked").val();//是否开始被选取
            var isFree = $("#isFree").find("option:checked").val();//是否有教练空缺
            var possessVehicle = $("#possessVehicle").find("option:checked").val();//是否有教练空缺

            var data = {
                coachId: coachId,
                fullname: fullname,
                phone: phone,
                teachingStage: teachingStage,
                isStartChoice: isStartChoice,
                isFree: isFree,
                possessVehicle: possessVehicle,
            }
            coachTable.reload({
                where: data,
            });
        })

        /**
         * 更多按钮
         */
        $("#moreBtn").on('click', function () {
            $(".more").toggle('fast', changeMoreBtn());
        })

        $("#teachingStageBtn").on('click',function(){
            var checkStatus = table.checkStatus("coachList");
            if(checkStatus['data'].length<1){
                layer.msg("未选中任何教练")
                return;
            }
            var stage = $("#teachingStageChange").find("option:checked");//教育科目
            var coachIds=[];
            for(i in checkStatus.data){
                if(checkStatus.data[i]['coachId']){
                    coachIds.push(checkStatus.data[i]['coachId'])
                }
            }
            var coachs={coachIds:coachIds};
            layer.confirm('确定修改选中教练教学科目为: '+stage.html(), function (index) {
                myAjax(mainUri+"/coach/updates",{coachsStr:JSON.stringify(coachs),teachingStage:stage.val()},function(d){
                    if(d['code']=='0'){
                        layer.msg('修改选中教练教学科目为: '+stage.html()+" 成功", {
                            icon: 1, time: 2000, end: function () {
                                coachTable.reload();
                                layer.closeAll();
                            }
                        })
                    }else{
                        layer.msg('修改选中教练教学科目为: '+stage.html()+" <span style='color:red'>失败</span>")
                    }
                })
            });
        })
        $("#isStartChoiceBtn").on('click',function(){
            var checkStatus = table.checkStatus("coachList");
            if(checkStatus['data'].length<1){
                layer.msg("未选中任何教练")
                return;
            }
            var stage = $("#isStartChoiceChange").find("option:checked");//是否毕业
            var coachIds=[];
            for(i in checkStatus.data){
                if(checkStatus.data[i]['coachId']){
                    coachIds.push(checkStatus.data[i]['coachId'])
                }
            }
            var coachs={coachIds:coachIds};
            layer.confirm('确定修改选中教练被选状态为: '+stage.html(), function (index) {
                myAjax(mainUri+"/coach/updates",{coachsStr:JSON.stringify(coachs),isStartChoice:stage.val()},function(d){
                    if(d['code']=='0'){
                        layer.msg('修改选中教练被选状态为: '+stage.html()+" 成功", {
                            icon: 1, time: 2000, end: function () {
                                coachTable.reload();
                                layer.closeAll();
                            }
                        })
                    }else{
                        layer.msg('修改选中教练被选状态为: '+stage.html()+" <span style='color:red'>失败</span>")
                    }
                })
            });
        })
        $("#allIsStartChoiceBtn").on('click',function(){
            var teachingStages = $("#teachingStages").find("option:checked").val();//教学科目
            var allIsStartChoiceChange = $("#allIsStartChoiceChange").find("option:checked").val();//是否开始被选
            var type=allIsStartChoiceChange==0?"结束选择":"开始被选"
            var msg='修改教学科目为科目'+teachingStages+'的教练状态为: '+type;
            layer.confirm("确定"+msg, function (index) {
                myAjax(mainUri+"/coach/updateAllIsStartChoice",{teachingStage:teachingStages,isStartChoice:allIsStartChoiceChange},function(d){
                    if(d['code']=='0'){
                        layer.msg(msg+"成功", {
                            icon: 1, time: 2000, end: function () {
                                coachTable.reload();
                                layer.closeAll();
                            }
                        })
                    }else{
                        layer.msg(msg+" <span style='color:red'>失败</span>")
                    }
                })
            });
        })
    });
</script>
</body>
</html>
`